<template>
  <div class="following-list">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <el-icon class="loading-icon"><Loading /></el-icon>
      <span>关注列表加载中...</span>
    </div>

    <!-- 空状态 -->
    <div v-else-if="users.length === 0" class="empty-state">
      <el-empty description="暂无关注用户">
        <span class="empty-text">您还没有关注任何用户</span>
        <el-button type="primary" @click="$emit('discover')" class="discover-btn">
          发现更多UP主
        </el-button>
      </el-empty>
    </div>

    <!-- 用户列表 -->
    <div v-else class="users-grid">
      <div
          v-for="user in paginatedUsers"
          :key="user.id"
          class="user-card"
      >
        <div class="user-header">
          <el-avatar
              :src="user.avatar"
              :size="60"
              class="user-avatar"
              @click="navigateToUser(user)"
          />
          <div class="user-info">
            <h4 class="username" @click="navigateToUser(user)">{{ user.username }}</h4>
            <p class="signature">{{ user.description || '这个用户很懒，什么都没有写～' }}</p>
            <div class="user-stats">
              <span class="fans-count">粉丝: {{ formatCount(user.fansCount) }}</span>
              <span class="video-count">视频: {{ user.videoCount }}</span>
            </div>
          </div>
        </div>

        <div class="user-actions">
          <el-button
              v-if="user.isMutual"
              type="info"
              size="small"
              disabled
              class="mutual-btn"
          >
            <el-icon><User /></el-icon>
            已互关
          </el-button>
          <el-button
              v-else
              type="danger"
              size="small"
              @click="handleUnfollow(user)"
              :loading="user.unfollowLoading"
              class="unfollow-btn"
          >
            <el-icon><Close /></el-icon>
            取消关注
          </el-button>
          <el-button
              type="primary"
              size="small"
              @click="visitUserSpace(user)"
              class="visit-btn"
          >
            <el-icon><View /></el-icon>
            访问空间
          </el-button>
        </div>

        <div class="user-tags">
          <el-tag v-if="user.isMutual" type="success" size="small" class="mutual-tag">
            <el-icon><User /></el-icon>
            互关
          </el-tag>
          <el-tag v-if="user.isSpecial" type="warning" size="small" class="special-tag">
            <el-icon><Star /></el-icon>
            特别关心
          </el-tag>
          <span class="follow-time">关注于 {{ formatTime(user.followTime) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Loading,
  User,
  Close,
  View,
  Star
} from '@element-plus/icons-vue'

// 定义Props
const props = defineProps({
  users: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 定义Emits
const emit = defineEmits(['unfollow', 'discover'])

const router = useRouter()

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12)

// 计算属性
const paginatedUsers = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return props.users.slice(start, end)
})

// 处理方法
const handleUnfollow = async (user) => {
  try {
    await ElMessageBox.confirm(
        `确定要取消关注 ${user.username} 吗？`,
        '取消关注',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    )

    emit('unfollow', user)
    ElMessage.success('取消关注成功')
  } catch (error) {
    // 用户点击取消
    console.log('取消操作')
  }
}

const navigateToUser = (user) => {
  router.push(`/user/${user.id}`)
}

const visitUserSpace = (user) => {
  window.open(`/user/${user.id}`, '_blank')
}

//const handleSizeChange = (newSize) => {
//  pageSize.value = newSize
//  currentPage.value = 1
//}

//const handleCurrentChange = (newPage) => {
//  currentPage.value = newPage
//}

// 工具函数
const formatCount = (count) => {
  if (!count) return '0'
  if (count >= 10000) {
    return (count / 10000).toFixed(1) + '万'
  }
  return count.toString()
}

const formatTime = (timeString) => {
  if (!timeString) return '未知时间'
  try {
    const date = new Date(timeString)
    return date.toLocaleDateString('zh-CN')
  } catch {
    return timeString
  }
}
</script>

<style scoped>
.following-list {
  min-height: 400px;
  padding: 20px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #999;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 16px;
  animation: spin 1s linear infinite;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
}

.empty-text {
  display: block;
  margin-bottom: 16px;
  color: #999;
}

.discover-btn {
  margin-top: 12px;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.user-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #f0f0f0;
}

.user-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.user-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.user-avatar {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.2s;
  border: 2px solid #f0f0f0;
}

.user-avatar:hover {
  transform: scale(1.05);
  border-color: #00a1d6;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.username {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #18191c;
  cursor: pointer;
  transition: color 0.2s;
}

.username:hover {
  color: #00a1d6;
}

.signature {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #61666d;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}

.user-stats {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}

.user-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.user-actions .el-button {
  flex: 1;
  font-size: 12px;
}

.mutual-btn {
  background: linear-gradient(135deg, #67c23a, #85ce61);
  border: none;
}

.unfollow-btn {
  background: linear-gradient(135deg, #f56c6c, #f78989);
  border: none;
}

.visit-btn {
  background: linear-gradient(135deg, #409eff, #79bbff);
  border: none;
}

.user-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mutual-tag, .special-tag {
  font-size: 10px;
  padding: 2px 6px;
}

.follow-time {
  font-size: 12px;
  color: #999;
  margin-left: auto;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .users-grid {
    grid-template-columns: 1fr;
  }

  .user-header {
    flex-direction: column;
    text-align: center;
  }

  .user-actions {
    flex-direction: column;
  }

  .user-tags {
    justify-content: center;
  }

  .follow-time {
    margin-left: 0;
  }
}
</style>